import { useState } from 'react';
import Dish from './Dish';
import TradeList from './TradeList';
import styles from './index.module.less';

export default function TradeTab() {
  const [active, setActive] = useState<'dish' | 'list'>('dish');

  return (
    <div className={`${styles.tradeTabWrap} bgfff zcard`}>
      <div className={`${styles.topwrap} flex`}>
        <div
          className={`${styles.item} ${active === 'dish' && styles.itemact} `}
          onClick={() => setActive('dish')}
        >
          盘口
        </div>
        <div
          className={`${styles.item} ${active === 'list' && styles.itemact} `}
          onClick={() => setActive('list')}
        >
          最新成交
        </div>
      </div>
      {active === 'dish' ? <Dish /> : <TradeList />}
    </div>
  );
}
